<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{$goods.title}</title>
<link href="__STATIC__/css/public.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/css/component.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/css/my.css" rel="stylesheet">
<link rel="stylesheet" href="__STATIC__/css/goods.css" type="text/css">
<link rel="stylesheet" href="__STATIC__/css/jqzoom.css" type="text/css">
<script type="text/javascript" src="__STATIC__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/header.js"></script>
<script type="text/javascript" src="__STATIC__/js/goods.js"></script>
<script type="text/javascript" src="__STATIC__/js/jqzoom-core.js"></script>
<!-- jqzoom 效果 -->
<script type="text/javascript">
    $(function(){
        $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false,
            title:false,
            zoomWidth:400,
            zoomHeight:400
        });
    })
</script>
</head>

<body>
{:Widget('Widgets/top')}

<div class="container clear position" style="margin-top:10px;"><div class="grid_12">
当前位置：首页 > {$goods.firstcat} > {$goods.subcat}
</div></div>

<div class="container clear" style="margin-top:10px;">
<div class="grid_2">
<div class="leftmenu">
<h3>{$goods.firstcat}</h3>
<ul>
{volist name="acat" id="vo"}
<li><a href="/index.php/index/index/prolist/cid/{$vo.id}">{$vo.name}</a></li>
{/volist}
</ul>
</div>
</div>
<div class="grid_10">

<!-- 商品信息内容 start -->
		<div class="goods_content fl mt10 ml10">
			<!-- 商品概要信息 start -->
			<div class="summary">
				<h3><strong>{$goods.title}</strong></h3>
				
				<!-- 图片预览区域 start -->
				<div class="preview fl">
					<div class="midpic" style="vertical-align:top">
						<a href="{$goods.thumb}" class="jqzoom" rel="gal1">   <!-- 第一幅图片的大图 class 和 rel属性不能更改 -->
							<img src="{$goods.thumb}" alt="" width="100%" />               <!-- 第一幅图片的中图 -->
						</a>
					</div>
	
					<!--使用说明：此处的预览图效果有三种类型的图片，大图，中图，和小图，取得图片之后，分配到模板的时候，把第一幅图片分配到 上面的midpic 中，其中大图分配到 a 标签的href属性，中图分配到 img 的src上。 下面的smallpic 则表示小图区域，格式固定，在 a 标签的 rel属性中，分别指定了中图（smallimage）和大图（largeimage），img标签则显示小图，按此格式循环生成即可，但在第一个li上，要加上cur类，同时在第一个li 的a标签中，添加类 zoomThumbActive  -->

					<div class="smallpic">
						<a href="javascript:;" id="backward" class="off"></a>
						<a href="javascript:;" id="forward" class="on"></a>
						<div class="smallpic_wrap">
							<ul>
								<li class="cur">
									<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '{$goods.thumb}',largeimage: '{$goods.thumb}'}">
                                    <img src="{$goods.thumb}" alt="" width="100%" />  </a>
								</li>
                                {volist name="$goods['images']" id="vo"}
								<li>
									<a href="javascript:void(0);" 
                                    rel="{gallery: 'gal1', smallimage: '{$vo}',largeimage: '{$vo}'}">
                                    <img src="{$vo}"></a>
								</li>
								{/volist}
							</ul>
						</div>
						
					</div>
				</div>
				<!-- 图片预览区域 end -->

				<!-- 商品基本信息区域 start -->
				<div class="goodsinfo fl ml10">
					<ul>
                    <li class="shop_price"><span>赠送： </span><strong>{$goods.jif} 消费积分</strong></li>
						<li class="shop_price"><span>本店价：</span> <strong>￥{$goods.marketprice}</strong></li>
					</ul>
					<form action="" method="post" class="choose">
						<ul>
							<li class="product">
								<dl>
									<dt>颜色：</dt>
									<dd>
										<a class="selected" href="javascript:;">黑色 <input type="radio" name="color" value="黑色" checked="checked" /></a>
										<a href="javascript:;">白色 <input type="radio" name="color" value="白色" /></a>
										<a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色" /></a>
										<input type="hidden" name="" value="" />
									</dd>
								</dl>
							</li>

							<li class="product">
								<dl>
									<dt>版本：</dt>
									<dd>
										<a href="javascript:;">i3 4G内存版 <input type="radio" name="ver" value="" /></a>
										<a href="javascript:;">i5 4G内存版 <input type="radio" name="ver" value=""  /></a>
										<a class="selected" href="javascript:;">i5 8G内存版<input type="radio" name="ver" value="" checked="checked" /></a>
										<a href="javascript:;">SSD超极本 <input type="radio" name="ver" value="" /></a>
										<input type="hidden" name="" value="" />
									</dd>
								</dl>
							</li>
							
							<li>
								<dl>
									<dt>数量：</dt>
									<dd>
										<a href="javascript:;" id="reduce_num"></a>
										<input type="text" name="amount" value="1" class="amount"/>
										<a href="javascript:;" id="add_num"></a>
									</dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt>&nbsp;</dt>
									<dd>
										<input type="submit" value="" class="add_btn" />
									</dd>
								</dl>
							</li>

						</ul>
					</form>
				</div>
				<!-- 商品基本信息区域 end -->
			</div>
			<!-- 商品概要信息 end -->
			<div style="clear:both;"></div>
 <div class="title"><h2>商品详情</h2></div>
<div class="content">
{$goods.content}
</div>

</div>
</div></div>

{:Widget('Widgets/foot')}

</body>
</html>
